﻿@model S4Store.Models.Report.CarBrandOrderTimeRateModel
@{
    Layout = null;
    ViewBag.Title = "CarBrandOrderTimeRate";
    var container = "div" + Guid.NewGuid().ToString();
    var brands = new List<String>();
    var data1 = new List<String>();
    var data2 = new List<String>();
    var diffs = new List<int>();
    foreach(var brand in Model.BrandDatas){
        brands.Add("\"" + brand.CarBrand.Name + "\"");
        data1.Add(brand.Rate.toInt());
        data2.Add(Model.DateRate.toInt());
        var diff = (int)(brand.Rate - Model.DateRate);
        diffs.Add(diff);


    }
    
}
<script type="text/javascript">
    $(function () {
        var $c = $("#myContentArea");
        var count = $("#myContentArea").find("table td").has(".value").size();
        var right = parseInt($("#right").css("width").replace("px", "")) - 20;
        if (count * 190 + 70 >= right) {
            $c.width(count * 190 + 70);
        }
    });
</script>
<div style="height: 100%; width: 100%; overflow: auto;">
<div id="myContentArea" style="overflow:hidden">
    @Html.Action("ReportBar", "Common", Model.BarModel)
    <div style="position:relative; width:100%">
        @if (Model.IsMonthConfigConfirmed)
        {        
            <div id="@container"></div>
            <div>
                <div style=" margin-left:70px; overflow:hidden">
                    <table style="width:100%">
                        <tr>
                            @for (int i = 0; i < diffs.Count; i++)
                            {
                                var diff=diffs[i];
                                <td align="center">
                                    @if (diff < 0)
                                    {
                                        <a class="specialRed"  href="@Url.Action("CarModelOrderTimeRate", new { Month = Model.BarModel.Month.ToString("yyyy-MM-dd"), SearchCarBrandId = Model.BrandDatas[i].CarBrand.Id })" target="navtab" title="@(Model.BrandDatas[i].CarBrand.Name)订单时间进度差">
                                            <div class="value">@diff</div>
                                            <div class="rt">实时订单：@Model.BrandDatas[i].Sale</div>
                                            <div class="rb">应时订单：@Model.BrandDatas[i].SaleExpectTarget</div>
                                        </a>
                                    }
                                    else
                                    {
                                        <a class="specialGreen"  href="@Url.Action("CarModelOrderTimeRate", new { Month = Model.BarModel.Month.ToString("yyyy-MM-dd"), SearchCarBrandId = Model.BrandDatas[i].CarBrand.Id })" target="navtab" title="@(Model.BrandDatas[i].CarBrand.Name)订单时间进度差">
                                            <div class="value">@diff</div>
                                            <div class="rt">实时订单：@Model.BrandDatas[i].Sale</div>
                                            <div class="rb">应时订单：@Model.BrandDatas[i].SaleExpectTarget</div>
                                        </a>
                                    }
                                </td>
                            }
                        </tr>
                    </table>
                </div>
            </div>
            <script type="text/javascript">
                $('#@container').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '分车型订单时间进度差'
                    },
                    xAxis: {
                        categories: [@Html.Raw(String.Join(",", brands))]
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '进度百分比(%)'
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{point.key}</b><br /><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    colors:["#058DC7","#50B432"],
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [
                        {
                            name: '订单进度',
                            data: [@String.Join(",", data1)]

                        }, 
                        {
                            name: '时间进度',
                            data: [@String.Join(",", data2)]

                        }
                    ]
                });
            </script>
        }
        else
        {
            <text>还未完成月初配置</text>
        }
    </div>
</div>
</div>